import { getHotTuijianList, getOneStopList } from '@/src/api/Goods';
import React, { useEffect, useState } from 'react';
import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';

interface RecommendProps {
  price: number;
  picture: string;
}
export default function HotRecommend() {
  const [list, setList] = useState<RecommendProps[]>([]);
  const [list2, setList2] = useState<RecommendProps[]>([]);
  // 获取爆款推荐列表
  const loadGetHotTuijianList = async () => {
    const result = await getHotTuijianList();
    console.log('getHotTuijianList----->', result);
    setList(result.data.rows);
  };
  // 获取一站全买列表
  const loadGetOneStopList = async () => {
    const result = await getOneStopList();
    console.log('getOneStopList----->', result);
    setList2(result.data.rows);
  };
  useEffect(() => {
    loadGetHotTuijianList();
    loadGetOneStopList();
  }, []);
  return (
    <View style={styles.container}>
      {/* 爆款推荐 */}
      <View style={styles.hotTuijian}>
        {/* 标题 */}
        <View style={styles.hotTuijian_title}>
          <Image
            style={styles.hotTuijian_title_img}
            source={require('@/assets/img/home_new.png')}
          ></Image>
        </View>
        {/* 内容 */}
        <View style={styles.hotTuijian_content}>
          {list.slice(0, 2).map((item) => {
            return (
              <View style={styles.hotTuijian_content_li}>
                <Image
                  style={styles.hotTuijian_img}
                  source={{ uri: item.picture }}
                ></Image>
                <Text
                  style={{
                    textAlign: 'center',
                    paddingTop: 4,
                    paddingBottom: 4,
                    color: '#fe5783',
                  }}
                >
                  ￥{item.price}
                </Text>
                <ImageBackground
                  source={require('@/assets/img/home_goods_discount.png')}
                  style={styles.hotTuijian_content_beijing}
                >
                  <Text style={{ textAlign: 'center', color: '#fff' }}>
                    立减 90
                  </Text>
                </ImageBackground>
              </View>
            );
          })}
        </View>
      </View>
      {/* 一站全买 */}
      <View style={styles.yizhanquanmai}>
        {/* 标题 */}
        <View style={styles.yizhanquanmai_title}>
          <Image
            style={styles.yizhanquanmai_title_img}
            source={require('@/assets/img/home_new.png')}
          ></Image>
        </View>
        {/* 内容 */}
        <View style={styles.yizhanquanmai_content}>
          {list2.slice(0, 2).map((item) => {
            return (
              <View style={styles.hotTuijian_content_li}>
                <Image
                  style={styles.yizhanquanmai_img}
                  source={{ uri: item.picture }}
                ></Image>
                <Text
                  style={{
                    textAlign: 'center',
                    paddingTop: 4,
                    paddingBottom: 4,
                    color: '#fe5783',
                  }}
                >
                  ￥{item.price}
                </Text>
                <ImageBackground
                  source={require('@/assets/img/home_goods_discount.png')}
                  style={styles.hotTuijian_content_beijing}
                >
                  <Text style={{ textAlign: 'center', color: '#fff' }}>
                    立减 90
                  </Text>
                </ImageBackground>
              </View>
            );
          })}
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 8,
  },
  hotTuijian: {
    flex: 1,
    backgroundColor: '#edf1fb',
    marginRight: 8,
  },
  hotTuijian_title: {
    width: '100%',
    paddingTop: 8,
    paddingBottom: 8,
    paddingLeft: 8,
  },
  hotTuijian_title_img: {
    width: '100%',
    height: 20,
  },
  hotTuijian_content: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingTop: 8,
    paddingBottom: 8,
  },
  hotTuijian_content_li: {
    backgroundColor: '#fff',
  },
  hotTuijian_img: {
    width: 70,
    height: 70,
  },
  hotTuijian_content_beijing: {
    width: 64,
    margin: 'auto',
    height: 26,
  },
  // 一站全买
  yizhanquanmai: {
    flex: 1,
    backgroundColor: '#fcf6ea',
  },
  yizhanquanmai_title: {
    width: '100%',
    paddingTop: 8,
    paddingBottom: 8,
    paddingLeft: 8,
  },
  yizhanquanmai_title_img: {
    width: '100%',
    height: 20,
  },
  yizhanquanmai_content: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingTop: 8,
    paddingBottom: 8,
  },
  yizhanquanmai_img: {
    width: 70,
    height: 70,
  },
});
